<template>
  <div class="videoContainer">
    <div class="main">
      <div class="mv">
        <!-- <video
          autoplay
          controls
          width="1200px"
          height="675px"
          src="../../../assets/images/爱你从不迷路.mp4"
        ></video> -->
        <vue3videoPlay v-bind="options" ref="myvideo" />
      </div>
      <div class="mvInfo">
        <div class="title">{{ mvInfo.name }}</div>
        <div class="playCount">{{ mvInfo.playCount }}次播放</div>
        <i class="iconfont icon-aixin like"></i>
        <i class="iconfont icon-zhuanfa relay"></i>
      </div>
    </div>
  </div>
  <Live></Live>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onUnmounted, onMounted } from "vue";
export default defineComponent({
  name: "Mvdetail",
});
</script>

<script lang="ts" setup>
import Live from "../../../components/Live/index.vue";
import "vue3-video-play/dist/style.css";
import vue3videoPlay from "vue3-video-play";
import { useRoute } from "vue-router";
import req from "../../../utils/req";
const options = reactive({
  width: "1200px", //播放器高度
  height: "675px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
// useRoute
const route = useRoute();
// 视频信息
const mvInfo = ref({ name: "", playCount: "" });
const myvideo = ref();
onMounted(async () => {
  const res = await req("/mv/url", { id: route.params.id }, "get");
  options.src = res.data.data.url;
  const res2 = await req("/mv/detail", { mvid: route.params.id }, "get");
  mvInfo.value = res2.data.data;
  myvideo.value.play();
});
onUnmounted(() => {
  options.src = "";
});
</script>

<style lang="less" scoped>
.videoContainer {
  background-color: #282828;
  width: 100%;
}
.main {
  width: 1200px;
  margin: 0px auto;
  .mv {
    height: 675px;
    background-color: #fff;
  }
  .mvInfo {
    height: 80px;
    display: flex;
    align-items: center;
    position: relative;
    .title {
      font-size: 22px;
      color: #fff;
    }
    .playCount {
      font-size: 12px;
      color: #999999;
      margin-left: 40px;
    }
    .like,
    .relay {
      color: #fff;
      font-size: 20px;
      position: absolute;
      right: 70px;
      cursor: pointer;
    }
    .relay {
      right: 0px;
    }
  }
}
</style>
